<!-- 退房交割单 -->
<template>
	<a-modal v-bind="options" width="80%">
		<div>
			<div class="d-module-title">
				<b>房屋配置</b>
			</div>
			<a-space direction="vertical" style="width: 100%">
				<vxe-table border show-header-overflow show-overflow align="left" :row-config="{isHover: true}" :data="infos.articles">
					<vxe-column title="种类" :minWidth="100" field="typeName"></vxe-column>
					<vxe-column title="物品名称" :minWidth="100" field="configName"></vxe-column>
					<vxe-column title="价格(元)" :minWidth="80" field="price"></vxe-column>
					<vxe-column title="数量" :minWidth="50" field="count"></vxe-column>
					<vxe-column title="是否损坏" :minWidth="150" align="center">
						<template #default="{row}">
							<vxe-checkbox v-model="checkboxList[row.isBroken]" disabled></vxe-checkbox>
						</template>
					</vxe-column>
				</vxe-table>
			</a-space>
		</div>
		<div>
			<div class="d-module-title">
				<b>备注</b>
			</div>
			<a-space direction="vertical" style="width: 100%">
				<div>{{ infos.comment }}</div>
			</a-space>
		</div>
		<div>
			<div class="d-module-title">
				<b>附件</b>
			</div>
			<a-space direction="vertical" style="width: 100%" v-if="infos">
				<div v-for="(value, index) in infos.attachmentDtos" :key="index">
					<a :href="value.url">{{ value.fileOriginName }}</a>
				</div>
			</a-space>
		</div>
	</a-modal>
</template>
<script setup lang="ts">
	import {onMounted, reactive, ref, toRef, watch} from 'vue'
	import {getAllDeliveryOrder} from '@/api/charter-contract'

	const props = defineProps({
		contractId: {
			type: [String, Number],
			default: ''
		},
		visible: {
			default: false,
			type: Boolean
		}
	})
	const emits = defineEmits(['update:visible', 'close'])

	const options = reactive({
		title: '退房交割单',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {}
	})
	const checkboxList = ref<any>([false, true])
	const infos = reactive<any>({
		articles: [],
		attachmentDtos: [],
		comment: '',
		attachments: ''
	})
	const getDetails = () => {
		let contractId = props.contractId
		let deliveryType = 2
		getAllDeliveryOrder(contractId, deliveryType).then(res => {
			console.log(res, '2')
			infos.articles = res?.data?.articles ? res?.data?.articles : []
			infos.attachmentDtos = res?.data?.attachmentDtos ? res?.data?.attachmentDtos : []
			infos.comment = res?.data?.comment
		})
	}
	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				getDetails()
			}
		}
	)
</script>
<style lang="less" scoped>
	.d-module-title {
		margin: 15px 0 5px;
	}
</style>
